<template>

  {{pinia.doublCount}}
  <button @click="pinia.increment">修改pinia中的值</button>
  {{pinia.count}}
  {{doublCount}}
  {{count}}

  <ul>
    <li v-for="item in pinia.list" :key="item.id">{{item.name}}</li>
  </ul>

</template>

<script  setup>

import { onMounted } from 'vue';
onMounted(() => {
  pinia.getList()
})


// 导入useCounterStore注册
// pinia对象中包含了所有store内容。数据和方法。
import { useCounterStore } from '@/lib/store.js';
const pinia = useCounterStore()


// 使用解构赋值的方法获取pinia里的内容时会使响应式丢失。需要使用storeToRefs包裹保持响应式
// storeToRefs只能用于数据响应。方法和函数不适用
import { storeToRefs } from 'pinia';
const { doublCount, count } = storeToRefs(pinia)

</script>

<style>
</style>
